<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
?>
<?php
$passwordWizard = sprintf(
    '<p><b>%s</b> {{admin.passwordStatus.label}}</p>
        <div class=\'col-sm-12 password-strength password-strength-{{admin.passwordStatus.class}}\'>
            <div class=\'col-sm-2\'></div>
            <div class=\'col-sm-2\'></div>
            <div class=\'col-sm-2\'></div>
            <div class=\'col-sm-2\'></div>
        </div>
    <p>%s</p>',
    $this->translate('Password Strength:'),
    $this->translate('Must be a mix of at least 7 alpha and numeric characters.(Ex.: BuyIt54).')
);
?>
<div class="step-controls">
    <a href="#" class="btn btn-primary" ng-click="previousState()"><?php echo $this->translate('Previous'); ?></a>
    <a href="#" class="btn btn-primary" ng-click="nextState()"><?php echo $this->translate('Next'); ?></a>
</div>

<div class="page-header">
    <h1>{{$state.current.header}}</h1>
</div>

<p><?php echo $this->translate('Create a new Admin account to manage you store.'); ?></p>

<form novalidate name="account" class="form-horizontal" role="form" style="padding-top: 20px;">
    <div class="form-group" ng-class="{'has-error': account.adminUsername.$invalid && account.submitted}">
        <label class="col-sm-3 control-label"><?php echo $this->translate('New Username'); ?>&nbsp;<span class="required">*</span></label>
        <div class="col-sm-4">
            <input tooltip-placement="right"
                   tooltip="<?php echo $this->translate('Must be 1 to 40 characters'); ?>"
                   tooltip-trigger="focus"
                   tooltip-append-to-body="true"
                   class="form-control"
                   type="text"
                   name="adminUsername"
                   ng-model="admin.username"
                   ng-maxlength="40"
                   required />
        </div>
        <div class="col-sm-offset-3 col-sm-4" ng-show="account.adminUsername.$invalid && account.submitted">
            <div class="error-container">
                <span ng-show="account.adminUsername.$error.required"><?php echo $this->translate('Please enter your new username.'); ?></span>
                <span ng-show="account.adminUsername.$error.maxlength"><?php echo $this->translate('Please enter a username between 1 and 40 characters.'); ?></span>
            </div>
        </div>
    </div>
    <div class="form-group" ng-class="{'has-error': account.adminEmail.$invalid && account.submitted}">
        <label class="col-sm-3 control-label"><?php echo $this->translate('New E-Mail'); ?>&nbsp;<span class="required">*</span></label>
        <div class="col-sm-4">
            <input tooltip-placement="right"
                   tooltip="<?php echo $this->translate('Must be a correct e-mail'); ?>"
                   tooltip-trigger="focus"
                   tooltip-append-to-body="true"
                   class="form-control"
                   type="email"
                   name="adminEmail"
                   ng-model="admin.email"
                   required />
        </div>
        <div class="col-sm-offset-3 col-sm-4" ng-show="account.adminEmail.$invalid && account.submitted">
            <div class="error-container">
                <span ng-show="account.adminEmail.$error.required"><?php echo $this->translate('Please enter your new e-mail.'); ?></span>
                <span ng-show="account.adminEmail.$error.email"><?php echo $this->translate('Please enter a correct e-mail.'); ?></span>
            </div>
        </div>
    </div>
    <div class="form-group" ng-class="{'has-error': account.adminPassword.$invalid && account.submitted}">
        <label class="col-sm-3 control-label"><?php echo $this->translate('New Password'); ?>&nbsp;<span class="required">*</span></label>
        <div class="col-sm-4">
            <input ng-change="passwordStatusChange()"
                   tooltip-placement="right"
                   tooltip-html-unsafe="<?php echo $passwordWizard; ?>"
                   tooltip-trigger="focus"
                   tooltip-append-to-body="true"
                   class="form-control"
                   type="password"
                   name="adminPassword"
                   ng-model="admin.password"
                   required />
        </div>
        <div class="col-sm-offset-3 col-sm-4" ng-show="account.adminPassword.$invalid && account.submitted">
            <div class="error-container">
                <span ng-show="account.adminPassword.$error.required"><?php echo $this->translate('Please enter your new password.'); ?></span>
            </div>
        </div>
    </div>
    <div class="form-group" ng-class="{'has-error': account.adminConfirm.$invalid && account.submitted}">
        <label class="col-sm-3 control-label"><?php echo $this->translate('Confirm Password'); ?>&nbsp;<span class="required">*</span></label>
        <div class="col-sm-4">
            <input tooltip-placement="right"
                   tooltip="<?php echo $this->translate('Please re-enter your password'); ?>"
                   tooltip-trigger="focus"
                   tooltip-append-to-body="true"
                   class="form-control"
                   type="password"
                   name="adminConfirm"
                   ng-model="admin.confirm"
                   confirm-password="admin.password"
                   required />
        </div>
        <div class="col-sm-offset-3 col-sm-4" ng-show="account.adminConfirm.$invalid && account.submitted">
            <div class="error-container">
                <span ng-show="account.adminConfirm.$error.required"><?php echo $this->translate('Please re-enter your password.'); ?></span>
                <span ng-show="account.adminConfirm.$error.confirmPassword"><?php echo $this->translate('Please make sure your passwords match.'); ?></span>
            </div>
        </div>
    </div>
</form>

<div class="step-controls">
    <a href="#" class="btn btn-primary" ng-click="previousState()"><?php echo $this->translate('Previous'); ?></a>
    <a href="#" class="btn btn-primary" ng-click="nextState()"><?php echo $this->translate('Next'); ?></a>
</div>
